﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>ProductClass</title>
	<script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
	<script type="text/javascript" src="../../Scripts/jquery.jbind.js"></script>
	<script type="text/javascript" src="../../Scripts/jquery.treeTable.js"> </script>
	<script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../Scripts/jquery.FixedHeadTable.js"> </script>
	<link href="../../Content/jquery.treeTable.css" rel="stylesheet" type="text/css" />
	<link href="../../Content/easyui.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		ul li { line-height: 30px; }
	</style>
</head>
<body>
	<%=	ViewData["a"]  %>
	<div style="float: left; width: 250px; overflow: scroll">
		<ul id="tt" class="easyui-tree">
			<%=ViewData["classData"] %>
		</ul>
	</div>
	<div style="float: left; margin-left: 10px;">
		<div>
			<input type="button" name="name" value="Add New Class" onclick="AddNewClass()" />
			<input type="button" name="name" value="Delete Selected" onclick="deleteClass()" />
			<div id="edit" style="display: none">
				<input type="hidden" name="" value="" id="ID" />
				<input type="hidden" name="" value="" id="PID" /><br />
				<br />
				<div id="firstLevelDiv">Please Select First Level Class:<select id="FirstLevelClass">
					<%=ViewData["FirstLevelClass"]  %></select><br />
					<br />
				</div>
				Class Name:<input type="text" name="" value="" id="name" style="width: 300px" />&nbsp;<br />
				<br />
				<input type="button" name="" value="Save" onclick="saveClass()" />
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function saveClass() {
			var id = $("#ID").val();
			if (id == "") {
				id = 0;
			}
			var name = $("#name").val();
			if (name == "") {
				alert("The name can not be null");
				return;
			}
			var pid = $("#FirstLevelClass :selected").val();
			$.ajax({
				url: "/Admini/AddProductClass",
				cache: false,
				data: { id: id, name: name, pid: pid },
				success: function (data) {
					if ($('#tt').tree('find', data.ID)) {
						$('#tt').tree('update', {
							target: $('#tt').tree('find', data.ID).target,
							text: data.Name
						});
					}
					else {
						$('#tt').tree('append', {
							parent: $('#tt').tree('find', data.PID).target,
							data: {
								id: data.ID,
								text: data.Name
							}
						});
					}
					alert("Save succeed!");
				},
				error: function (data) {
				}
			});
		}
		$(document).ready(function () {
			init();
		});

		function AddNewClass() {
			$("#FirstLevelClass").show();
			$("#edit").show();
			$("#ID").val("");
			$("#PID").val("");
			$("#name").val("");
		}

		var currentNodeID = "";

		function deleteClass() {
			if (currentNodeID == "") {
				alert("Please select one class node");
				return;
			}
			if (!confirm("Do you confirm to delete this class? Produts will be deleted inscade!")) {
				return;
			}
			$.ajax({
				url: "/Admini/DeleteProductClass",
				cache: false,
				data: { id: currentNodeID },
				success: function (data) {
					if ($('#tt').tree('find', data.ID)) {
						$('#tt').tree('update', {
							target: $('#tt').tree('find', data.ID).target,
							text: data.Name
						});
					}
					else {
						$('#tt').tree('append', {
							parent: $('#tt').tree('find', data.PID).target,
							data: {
								id: data.ID,
								text: data.Name
							}
						});
					}
					alert("Save succeed!");
				},
				error: function (data) {
				}
			});
		}

		function init() {
			$.ajax({
				cache: false,
				url: "/Admini/Getall",
				success: function (aaa) {
					$('#tt').tree({
						data: aaa,
						onClick: function (node) {
							$("#ID").val(node.id);
							currentNodeID = node.id;
							$("#PID").val($('#tt').tree('getNode', $('#tt').tree('getParent', node.target).target).id);
							$("#FirstLevelClass").val($('#tt').tree('getNode', $('#tt').tree('getParent', node.target).target).id);
							$("#name").val(node.text);
							$("#edit").show();
						}
					});
				}
			});
		}
	</script>
</body>
</html>
